<template>
  <div>
    <el-container style="height: 650px;min-width: 1000px">
      <el-header>
        <div class="title_div" style="width: 200px;float: left ">
          <h2 class="title_h2" style="height: 20px; :hover"  @click="toHome()">
            <i class="el-icon-s-help"></i>
            NG科技</h2>
        </div>
        <div style="margin-top: 10px;float: right;margin-right: 60px">
          <el-link style="font-size: 17px;margin-bottom: 5px" type="error" @click="showMessage()">消息</el-link>
          <el-avatar :size="40"
                     :src="user.headImage?'http://192.168.123.150' +user.headImage:'../../../../static/image/noLoginHeadImage.png'"></el-avatar>
          <el-popover
            placement="bottom"
            width="60px"
            style="padding: 0px;"
            trigger="hover">
            <ul style="list-style: none;padding: 0px 20px 0px 20px">
              <li style="margin-top: 5px" @click="toPersonalCenter()">个人中心</li>
              <li style="margin-top: 5px" @click="logout()">退出</li>
            </ul>
            <!--              <el-button >click 激活</el-button>-->
            <span class="login_register" slot="reference"
                  style="color: white;font-size: 18px">{{ user.nickname }}</span>
          </el-popover>

        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            class="sidebar-menu"
            router
            :default-active="$route.path"
            :collapse="!sidebar.opened"
            :collapse-transition="true"
            :unique-opened="true"

            :show-timeout="200"
            background-color="#434343"
            text-color="#fff"
            active-text-color="#1f73bb">
            <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 595px;">
              <template v-for="group in menuList">
                <el-submenu v-if="group.children && group.children.length > 0" :key="group.id" :index="group.id+''">
                  <template slot="title">
                    <i :class="group.icon"></i>
                    <span slot="title">{{group.menuName}}</span>
                  </template>
<!--                  'AdminModule/'+menu.menuUrl.replace('/','-')-->
                  <el-menu-item v-for="menu in group.children" :key="menu.id" :index="{name :menu.menuUrl.replace('/', '-')}">
<!--                                @click="getToRouter(menu)" >-->
                    <i class="icon iconfont icon-pointer" style="vertical-align: baseline;"/>
                    {{menu.menuName}}
                  </el-menu-item>
                </el-submenu>
                <div v-else>
                  <el-submenu v-if="!group.menuUrl" :key="group.id" :index="group.id+''">
                    <template slot="title">
                      <i :class="group.icon"></i>
                      <span slot="title">{{group.menuName}}</span>
                    </template>
                  </el-submenu>
                  <el-menu-item v-else :key="group.id" :index="{name :group.menuUrl.replace('/', '-')}">
                    <i :class="group.icon"></i>
                    <span slot="title">{{group.menuName}}</span>
                  </el-menu-item>
                </div>
              </template>
            </el-scrollbar>
          </el-menu>
        </el-aside>
        <el-main>
          <div style="height: 530px;background-color: white;padding: 10px">
            <router-view ></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <MyMessageList :user="user" :random-string="randomString"></MyMessageList>
  </div>
</template>

<script>
import MyMessageList from "../../components/MyMessageList";
export default {
  name: "AdminModule",
  components:{
    MyMessageList
  },
  data() {
    return {
      user: {
        headImage: '../../../../static/image/noLoginHeadImage.png',
        nickname: 'Admin',
        userId: '',
        userName: '',
      },
      sidebar:{
        opened:true
      },
      menuList:[],
      contentPage:'business-areaModule',
      randomString:'',
    }
  },
  mounted() {
    //检验是否登录，防止退出后点击返回获取到页面
    let token = localStorage.getItem("Authorization")
    !token && this.$router.push({path: '/'})
    this.user = this.$route.query
    this.user.userId || this.getUserInfo()
    let josnStr = sessionStorage.getItem("menuList")
    this.menuList = JSON.parse(josnStr)

  },
  methods: {
    showMessage(){
      this.randomString = Math.random().toString(36).slice(-6);
    },
    toPersonalCenter(){
      this.$router.push({name: "PersonalCenter"})
    },
    toHome(){
      this.$router.push({path:"/"})
    },
    logout() {
      this.$store.dispatch("logout");
      localStorage.removeItem("Authorization");
      this.$router.push({path: '/'})
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    getUserInfo() {
      this.$axios({
        method: "get",
        url: "/getUserInfo"
      }).then(res => {
        if (res.data.code === 200) {
          let user = res.data.data
          this.$store.commit("setUserId",user.id)
          this.$store.commit("setNickname",user.nickname)
          this.$store.commit("setName",user.username)
          this.$store.commit("setHeadImage",user.headImage)
          sessionStorage.setItem("roleList",user.roleList)
          this.user = {
            userId: user.id,
            userName: user.username,
            nickname: user.nickname,
            headImage:  user.headImage
          }
        }

      })
    },
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #1f73bb;
  color: white;
  line-height: 20px;
}

.el-aside {
  background-color: #434343;
  color: #333;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
}

body > .el-container {
  margin-bottom: 20px;
}

li:hover {
  background-color: #e9eef3;
  cursor: pointer;
}

.title_div :hover{
  cursor: pointer;
}
</style>
